<template>
  <div class="recommend">
    <div class="title">
      <h2>送恋人/爱情鲜花</h2>
    </div>
    <div class="items">
      <div class="item" v-for="item in items" @click="ItemDetail(item.id)" :key="item.id">
        <div class="item-left">
          <img v-lazy="item.pic" alt />
        </div>
        <div class="item-right">
          <h3>{{ item.name }}</h3>
          <p>
              {{ item.characteristic ? item.characteristic: '暂无描述' | filterDesc}}
          </p>
          <div class="pic">
            <div class="pic-left">
              <h3>
                  {{ item.minPrice | currency }}
              </h3>
              <span>已销售13.6万</span>
            </div>
            <div class="pic-right">
              <van-icon @click.stop="addCart(item.id)" name="cart-circle" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
    // 将商品的id传递给父组件
    ItemDetail (id) {
      this.$emit('ItemDetail', id)
    },
    addCart (id) {
      this.$emit('addCart', id)
    }

  },
  filters: {
    filterDesc (v, len = 10) {
      if (v.length > 10) {
        return v.substr(0, len) + '...'
      } else {
        return v
      }
    },
    currency (v, sign = '￥') {
      return sign + v
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  margin: 20px 0;
  text-align: center;
  width: 100%;
  font-size: 18px;
  h2{
    font-weight: 600;
  }
}
.item {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  margin-bottom: 20px;
  .item-left {
    img {
      width: 170px;
      height: 186px;
    }
  }
  .item-right{
    width: 100%;
    box-sizing: border-box;
    padding: 12px 0 8px 12px;
    h3{
      font-weight: 600;
      margin-bottom: 15px;
    }
    p{
      font-size: 13px;
      line-height: 18px;
    }
    .pic{
      margin-top: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 10px;
      box-sizing: border-box;
      .pic-left{
        span{
          font-size: 12px;
          color: #71797f;
        }
      }
      .pic-right{
        font-size: 22px;
        color: rgb(255, 130, 100);
      }
    }
  }
}
</style>
